<template>
  <!--  <d2-container>-->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-card style="word-wrap: break-word;word-break: normal;">
    <template v-for="(item, i) in list" >
      <el-form-item :label="item.label" :key="i" style="margin-left: 20px" >
        <el-input style="width: 200px" size="mini" v-if="item.type === 'input'" v-model="formInline[item.key]" :placeholder="'请输入'+item.label"></el-input>
        <el-select style="width: 200px" size="mini" v-if="item.type === 'select'" v-model="formInline[item.key]" :placeholder="'请选择'+item.label">
          <el-option  v-for="t in item.options" :key="getValue(item,t)" :label="getLabel(item,t)" :value="getValue(item,t)">
          </el-option>
        </el-select>
        <el-radio-group  v-if="item.type === 'radio'" v-model="formInline[item.key]" size="mini">
          <el-radio-button v-for="t in item.options" :key="t.value" :label="t.value">{{t.label}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </template>
      <el-form-item style="margin-left: 50px">
        <el-button size="mini" type="primary" @click="onSubmit">查询</el-button>
        <el-button size="mini" type="primary" @click="onInit">重置</el-button>
      </el-form-item>
    </el-card>

  </el-form>
  <!--  </d2-container>-->
</template>

<script>
import Vue from 'vue'
export default {
  props: {
    list: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    },
    search: {
      type: Function
    }
  },
  data () {
    return {
      formInline: {

      }
    }
  },
  created () {
    this.onInit()
  },
  methods: {
    onSubmit () {
      const res = JSON.parse(JSON.stringify(this.formInline))
      this.search(res)
    },
    onInit () {
      for (const item of this.list) {
        // console.log('item：：：：：：：', item)
        if (item.dataType === 'string') {
          Vue.set(this.formInline, item.key, item.default || '')
        } else if (item.dataType === 'array') {
          Vue.set(this.formInline, item.key, item.default || [])
        } else {
          Vue.set(this.formInline, item.key, item.default || undefined)
        }
      }
    },
    // select 选择框动态值
    getValue (item, t) {
      if (!item.type || item.type !== 'select') {
        return ''
      }
      if (item.optionValue && item.optionValue.length && item.optionValue.length > 0) {
        let value = ''
        for (const key of item.optionValue) {
          if (value !== '') {
            value = value + `,${t[key]}`
          } else {
            value = value + `${t[key]}`
          }
        }
        return value
      } else if (item.optionValue && !item.optionValue.length) {
        return t[item.optionValue]
      } else if (t.value) {
        return t.value
      } else if (t.id) {
        return t.id
      }
      return t
    },
    // select 选择框动态展示名
    getLabel (item, t) {
      if (!item.type || item.type !== 'select') {
        return ''
      }
      if (item.optionLabel && item.optionLabel.length && item.optionLabel.length > 0) {
        let value = ''
        for (const key of item.optionLabel) {
          if (value !== '') {
            value = value + ` ${t[key]}`
          } else {
            value = value + `${t[key]}`
          }
        }
        return value
      } else if (item.optionLabel && !item.optionLabel.length) {
        return t[item.optionLabel]
      } else if (t.label) {
        return t.label
      }
      return t
    }
  }
}
</script>

<style scoped>

</style>
